﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Binding to Remote Data - jQuery EasyUI Demo</title>
    <link href="Content/jqueryui/easyui.css" rel="stylesheet" type="text/css" />
    <link href="Content/jqueryui/icon.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="Scripts/nremedy.ui.js" type="text/javascript"></script>
    <script type="text/javascript">

        function myLoader(param, success, error) {
            var that = $(this);
            var opts = that.datagrid("options");
            if (!opts.url) {
                return false;
            }
            $.ajax({
                type: opts.method,
                url: opts.url,
                data: param,
                dataType: "json",
                success: function (data) {
                    if ('Exception' in data) {                        
                        showError(data);
                    }
                    success(data);
                },
                error: function () {
                    error.apply(this, arguments);
                }
            }); 
        }


        $(function () {

            $('#auto').combobox({
                hasDownArrow: false,
                url: '/Account/People',
                method: 'get',
                mode: 'remote',
                valueField: 'id',
                textField: 'text',
                panelHeight: 'auto',
                onSelect: function (record) {
                    $('#prop1').val(record.prop1);
                    $('#prop2').val(record.prop2);
                }
            });


        });

        function s1(value, row, index) {
            if (index > 0) {
                //check browser capability
                    if (value != $('#table1').datagrid('getData').rows[index - 1][this.field])
                        return 'background-color:#ffee00;color:red;';
                }
        }

        function bload(param) {
            param.qu = "'450'=\"000000000000074\"";
            //param.fields = "536870956|536870917|536890210|536870924|536870918|536870955|536890190|450";
            param.page = 1;
            param.rows = 10;
        }
    </script>
</head>
<body>
            <table class="easyui-datagrid" style="width:400px;height:250px"  id="table1"
        data-options="url:'/Table/Query/WS_Incident_Audit',fitColumns:true,singleSelect:true,
        onBeforeLoad: bload,loader:myLoader,pagination:true">  
    <thead>  
        <tr>  
            <th data-options="field:'f536870956',width:100">Code</th>  
            <th data-options="field:'f536870917',width:100">Name</th>  
            <th data-options="field:'f536890210',width:100">Price</th>  
            <th data-options="field:'f536870924',width:100,styler:s1">Price</th>  
            <th data-options="field:'f536870918',width:100">Price</th>  
            <th data-options="field:'f536870955',width:100">Price</th>
            <th data-options="field:'f536890190',width:100">Price</th>
            <th data-options="field:'f450',width:100">Price</th>
        </tr>  
    </thead>  

</table>  
<input id="auto" />
<input id="prop1" />
<input id="prop2" />


<div id="error_dlg"></div>

</body>
</html>